
import {useEffect, useState} from 'react'

/**
 * 自定义Hook：
 *  是以use打头的函数，通过自定义hook函数可以用来实现逻辑的封装和复用
 * 
 * 思路：
 *  1.声明一个以use打头的函数
 *  2.在函数体内封装可用的逻辑
 *  3.把组件中用到的状态return回去(以对象或数组)
 *  4.在哪个组件中刚要用到这个逻辑，就执行这个函数，结构出来状态和回调进行使用
 */
function Son(){
  return(
    <div>this is Son
    </div>
  )
}

function useToogle(){
  const [value,setValue] = useState(true)

  const toogle = ()=>{setValue(!value)}

  return{
    value,
    toogle
  }
}




/**
 * 自定义ReactHook使用规则：
 *    1.只能在徐建中或者其他自定义Hook函数中调用
 *    2.只能在组件的顶层调用给，不能嵌套在if、for、其他函数中
 */
function App() {

  const {value,toogle} =useToogle()

  return (
    <div>
      {value && <Son/>}
     <button onClick={toogle}>toogle</button>
    </div>
  )
}

export default App;
